<template>
  <div class="m-life">
    <el-row>
      <el-col :span="14">
        <slider />
      </el-col>
      <el-col :span="4">
        <a href="https://bj.meituan.com/xiuxianyule/">
          <div class="m-life-pic" />
        </a>
      </el-col>
      <el-col :span="6">
        <!-- 登录注册区域 -->
        <div v-if="!flag" class="m-life-login">
          <h4>
            <img src="//s0.meituan.net/bs/fe-web-meituan/2d05c2b/img/avatar.jpg" alt="">
          </h4>
          <p class="m-life-login-name">
            Hi！你好
          </p>
          <p>
            <nuxt-link to="/register">
              <el-button
                round
                size="medium"
              >
                注册
              </el-button>
            </nuxt-link>
          </p>
          <p>
            <nuxt-link to="/login">
              <el-button
                round
                size="medium"
              >
                立即登录
              </el-button>
            </nuxt-link>
          </p>
        </div>
        <div v-else class="m-life-login">
          <h4>
            <img src="//s0.meituan.net/bs/fe-web-meituan/e3064a3/img/head-img.png" alt="">
          </h4>
          <p class="m-life-login-name">
            Hi！{{ username }}
          </p>
          <div class="items_wrap">
            <div v-for="item in items" :key="item.title" class="fn-item">
              <a :href="item.href" target="_blank">
                <div class="icon">
                  <i class="iconfont" :class="item.icon" />
                </div>
                <p class="fn-name">{{ item.title }}</p>
              </a>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7">
        <div class="m-life-hotel" />
      </el-col>
      <el-col :span="7">
        <div class="m-life-music" />
      </el-col>
      <el-col :span="4">
        <div class="m-life-coop" />
      </el-col>
      <el-col :span="6">
        <div class="m-life-downapp">
          <img
            src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png"
            alt="下载APP"
          >
          <p>美团APP手机版</p>
          <h4><span class="red">1元起</span><em class="gary">吃喝玩乐</em></h4>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Slider from './slider.vue'
export default {
  components: {
    Slider
  },
  data () {
    return {
      flag: false,
      username: '',
      items: [
        {
          title: '我的订单',
          icon: 'icon-dingdan',
          href: '/order'
        },
        {
          title: '我的收藏',
          icon: 'icon-star-copy',
          href: 'javascript:;'
        },
        {
          title: '抵用券',
          icon: 'icon-diyongquan',
          href: 'javascript:;'
        },
        {
          title: '余额',
          icon: 'icon-yue2',
          href: 'javascript:;'
        },
        {
          title: '更多',
          icon: 'icon-process',
          href: 'javascript:;'
        }
      ]
    }
  },
  async mounted () {
    const res = await this.$axios.get('/users/getUser')
    if (res.status !== 200) {
      this.$message.error('服务器出错了')
      return
    }
    if (res.data.username === '') {
      this.flag = false
    } else {
      this.flag = true
      this.username = decodeURIComponent(res.data.username)
    }
    // eslint-disable-next-line no-console
    console.log(res)
  }
}
</script>

<style lang="scss">
@import '@/assets/css/index/life.scss';
</style>
